/*
 * @Date: 2022-03-29 12:40:32
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 13:39:32
 * @FilePath: /payment/pay/src/pages/Tenant/TenantDeatil.jsx
 */
import React,{useState,useEffect} from 'react'
import Tab from '../../components/Tabs'
import { DatePicker, Descriptions,Form,Button, Table,ConfigProvider, Select } from 'antd';
import style from './recharge.module.css'
import { SearchOutlined,ExportOutlined } from '@ant-design/icons';
import zhCN from "antd/es/locale/zh_CN";
import axios from '../../util/axios'
import qs from 'qs'
import Export from './Export';
const { RangePicker } = DatePicker;
const { Option } = Select;

//资金明细
export default function TenantDeatil() {
  //分页
  let [pag,setPag]=useState({current:1,pageSize:5,pageSizeOptions:[5,10,20],showSizeChanger:true,showQuickJumper:true,onChange:changePage})
  //模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
   //表格数据
   let [data, setData] = useState()
   //是否为全部的数据
   let [isAll,setIsAll]=useState(true)
   //状态数组
   let [typeArr,setTypeArr]=useState()
   let [form1]=Form.useForm()
   useEffect(() => {
    
     if(isAll){
       console.log('查询全部');
       axios({
         url: '/ziJinMingXi',
         method: 'get',
         params: {
           limit: pag.pageSize.toString(),
           name: JSON.parse(localStorage.getItem('user')).uName,
           page: pag.current.toString()
         },
       }).then(res => {
         console.log(res);
         if (res.code === 200) {
           setData(res.data.map(item => ({ ...item, key: item.id })))
           setPag({ ...pag, total: res.count })
           setIsAll(true)
         }
       })
       axios({
        url: '/ziJinMingXi/selectZiJinMingXiZhuangTai',
        method: 'get',
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          setTypeArr(res.data)
        }
      })
     }else{
       form1.submit()
     }
     
   }, [pag.current,isAll])
  const onFinish = (values) => {
    console.log('Success:', values);
    const rangeValue = values.time
    //时间格式转换
    values = {
      ...values,
      time: rangeValue&&[rangeValue[0].format('YYYY-MM-DD hh:mm:ss'), rangeValue[1].format('YYYY-MM-DD hh:mm:ss')]
    }

    //搜索
    axios({
      url: '/ziJinMingXi',
      method: 'get',
      params: {
        limit: pag.pageSize.toString(),
        name: JSON.parse(localStorage.getItem('user')).uName,
        page: pag.current.toString(),
        start:values.time&&values.time[0],
        end:values.time&&values.time[1],
        zhangBianLeiXing:values.type
        // zhangBianLeiXing:'充值'
      },
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        setIsAll(false)
      }
    })

  };
  //页数更改时
  function changePage(page,pageSize){
    setPag({...pag,current:page,pageSize})
  }

  //改变下拉列表
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  
 
  const columns = [
    {
      title: '记录ID',
      dataIndex: 'id',
      key: 'id',
      sorter: {
        compare: (a, b) => a.setId - b.setId,
        multiple: 2,
      },
    },
    {
      title: '类型',
      dataIndex: 'leiXing',
      key: 'leiXing',
      sorter: {
        compare: (a, b) => a.type - b.type,
        multiple: 3,
      },
      render:(text)=>{
        return  text==='充值'?<span style={{color:"#5c5"}} >充值</span>:
                text==='扣款'?<span style={{color:"#f05"}} >扣款</span>:
                text==='上分'?<span style={{color:"#20f"}}>上分</span>:
                text===4?<span style={{color:"#ff0"}}>退款</span>:
                text===5?<span style={{color:"#f5f"}}>返利</span>:
                text===6?<span style={{color:"#50f"}}>冲正</span>:''
        }
    },
    {
      title: '商户名称',
      dataIndex: 'nickName',
      key: 'nickName',
    },
    {
      title: '商户号',
      key: 'name',
      dataIndex: 'name',
      
    },
    {
      title: '流水号',
      dataIndex: 'liuShuiHao',
      key: 'liuShuiHao',
    },
    {
      title: '变动前金额',
      dataIndex: 'bianHuaQianJE',
      key: 'bianHuaQianJE',
    },
    {
      title: '变动金额',
      key: 'bianHuaJinE',
      dataIndex: 'bianHuaJinE',
      render:text=>{
        return text<0?<span style={{color:"#f05"}}>{text}</span>:<span style={{color:"#5c5"}}>+{text}</span>
      }
    },
    
    {
      title: '变动后金额',
      dataIndex: 'bianHuaHouJE',
      key: 'bianHuaHouJE',
    },
    {
      title: '操作时间',
      key: 'caoZuoShiJian',
      dataIndex: 'caoZuoShiJian',
      
    },
    
  ];
/*   
  setData( [
    {
      key: '1',
      setId:1,
      type:1,
      userName:'test',
      userCard:'123456',
      num: 200,
      orderId: '31213435442',
      oldNum: 1000,
      newNum: 1200,
      time:'2021-10-12 12:30',
    },
    {
      key: '2',
      setId:15,
      type:3,
      userName:'test',
      userCard:'123456',
      num: -200,
      orderId: '31213435442',
      oldNum: 1000,
      newNum: 1200,
      time:'2021-10-12 12:30',
    },
    {
      key: '3',
      setId:11,
      type:2,
      userName:'test',
      userCard:'123456',
      num: +200,
      orderId: '31213435442',
      oldNum: 1000,
      newNum: 1200,
      time:'2021-10-12 12:30',
    },
    {
      key: '4',
      setId:20,
      type:4,
      userName:'test',
      userCard:'123456',
      num: 200,
      orderId: '31213435442',
      oldNum: 1000,
      newNum: 1200,
      time:'2021-10-12 12:30',
    },
    {
      key: '5',
      setId:14,
      type:5,
      userName:'test',
      userCard:'123456',
      num: 200,
      orderId: '31213435442',
      oldNum: 1000,
      newNum: 1200,
      time:'2021-10-12 12:30',
    },
    {
      key: '6',
      setId:18,
      type:6,
      userName:'test',
      userCard:'123456',
      num: 200,
      orderId: '31213435442',
      oldNum: 1000,
      newNum: 1200,
      time:'2021-10-12 12:30',
    },
  ]); */
  return (
    <div>
      <Tab title="商户资金明细"/>
      
      <Form
      name="basic"
      form={form1}
      onFinish={onFinish}
      autoComplete="off"
      layout='inline'
      className={style.content}
    >
      <Form.Item name='type'>
        <Select placeholder="账变类型" style={{ width: 150 }} onChange={handleChange}>
          {typeArr&&typeArr.map(item=>{
            return <Option key={item.id}  value={item.state}>{item.state}</Option>
          })}
      </Select>
      </Form.Item>
      <Form.Item name="time">
        <RangePicker showTime placeholder={['开始日期','结束日期']}/>
      </Form.Item>

      <Form.Item >
        <Button type="primary" htmlType="submit" onClick={() => {
              setPag({ ...pag, current: 1 })
          }} icon={<SearchOutlined />}>
          搜索
        </Button>
      </Form.Item>
      <Form.Item >
        <Export data={data} header={columns} fileName='商户资金明细.xlsx'/>
      </Form.Item>
      <Form.Item >
          <Button type="primary" onClick={()=>{
            setIsAll(true);
            setPag({...pag,current:1});
            }
            }>
            查看全部
          </Button>
        </Form.Item>
    </Form>
    <div className={style.content}>
    <ConfigProvider locale={zhCN}>
      <Table columns={columns} dataSource={data} pagination={pag} />
      </ConfigProvider>
    </div>
      
    
    
    </div>
  )
}
